<template>
  <div :class="$style.wrap">
    <ContentWrap>
      <Query ref="query" @on-query="queryHandle"></Query>
      <div class="button-container" style="padding-top: 0">
        <Button type="primary" @click="evaluateHandle">质检评分</Button>
        <Button type="primary" @click="cancelHandle">取消任务</Button>
        <ChangeInspectionPerson ref="cip" :selection-list="selectionList" @on-refresh="refreshTable('onPage')">更换质检人</ChangeInspectionPerson>
      </div>
      <table-box ref="table" no-request :table-config="tableConfig" :other-filters="otherFilters" :other-raw="otherRaw" :selected-arry.sync="selectionList" @selection-change="selectionChangeHandle">
        <el-table-column slot="before" type="index" align="center" label="序号" width="50"></el-table-column>
      </table-box>
    </ContentWrap>
  </div>
</template>
<script>
import ContentWrap from '@/components/ContentWrap'
import Query from '../components/query'
import ChangeInspectionPerson from '../components/changeInspectionPerson'
import { taskStateList, allegeList, timeOutList } from '../../common'
import { appCode, domainCode } from '@/api/dataDict'
import { qualityCheckTaskCancel } from '@/api/inspection'
export default {
  name: 'TaskQuery',
  components: {
    ContentWrap,
    Query,
    ChangeInspectionPerson
  },
  data() {
    return {
      tableConfig: {
        interfacePath: '/call-center/api/v1/qualityCheckTask/page',
        hideFuncBar: true,
        sort: 'createTime',
        order: 'desc',
        setting: [
          {
            prop: 'projectName',
            label: '项目名称',
            minWidth: 120
          },
          {
            prop: 'taskCode',
            label: '任务编码',
            minWidth: 145
          },
          {
            prop: 'litigant',
            label: '受检人',
            minWidth: 120,
            formatData: v => {
              return `${v.litigantName}(${v.litigant})`
            }
          },
          {
            prop: 'executor',
            label: '质检人',
            minWidth: 120,
            formatData: v => {
              return `${v.executorName}(${v.executor})`
            }
          },
          {
            prop: 'state',
            label: '任务状态',
            minWidth: 120,
            formatData: v => {
              return this.$getNameByDataDict(v.state, taskStateList)
            }
          },
          {
            prop: 'isAppeal',
            label: '是否申诉',
            minWidth: 120,
            formatData: v => {
              return this.$getNameByDataDict(v.isAppeal, allegeList)
            }
          },
          {
            prop: 'isTimeout',
            label: '是否超时',
            minWidth: 120,
            formatData: v => {
              return this.$getNameByDataDict(v.isTimeout, timeOutList)
            }
          },
          {
            prop: 'callType',
            label: '呼叫类型',
            minWidth: 120,
            propEnum: {
              domainCode,
              appCode,
              dictTypeCode: 'CALL_TYPE'
            }
          },
          {
            prop: 'businessType1Name',
            label: '一级业务类型',
            minWidth: 120
          },
          {
            prop: 'businessType2Name',
            label: '二级业务类型',
            minWidth: 120
          },
          {
            prop: 'createBy',
            label: '创建人',
            minWidth: 120,
            formatData: v => {
              return `${v.createByName}(${v.createBy})`
            }
          },
          {
            prop: 'createTime',
            label: '创建时间',
            minWidth: 140
          },
          {
            prop: 'lastUpdateBy',
            label: '最近修改人',
            minWidth: 120,
            formatData: v => {
              return `${v.lastUpdateByName}(${v.lastUpdateBy})`
            }
          },
          {
            prop: 'lastUpdateTime',
            label: '最近修改时间',
            minWidth: 140
          }
        ]
      },
      otherFilters: [],
      otherRaw: {},
      selectionList: []
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (from.name === 'InsEvalScore') {
        vm.refreshTable('onPage')
      }
    })
  },
  methods: {
    queryHandle(otherFilters) {
      this.otherFilters = otherFilters
      this.refreshTable()
    },
    selectionChangeHandle(v) {
      this.selectionList = v
    },
    // 刷新列表
    refreshTable(type) {
      this.$nextTick(() => {
        this.$refs.table.initTableData(type)
      })
    },
    // 评分
    evaluateHandle() {
      return this.$checkSelected(this.selectionList).then(() => {
        const { state, id } = this.selectionList[0]
        if (state === 2 || state === '2') {
          this.$router.push({ name: 'InsEvalScore', params: { id }})
        } else {
          this.$message.warning('只有状态是未质检的才能进行质检评分！')
        }
      })
    },
    // 取消
    cancelHandle() {
      return this.$checkSelected(this.selectionList).then(() => {
        this.$msgbox({
          title: '提示',
          message: '确认取消？',
          showCancelButton: true,
          type: 'warning'
        }).then(() => {
          return qualityCheckTaskCancel(this.selectionList[0].id).then(res => {
            this.$message.success('取消成功！')
            this.refreshTable('onPage')
          })
        })
      })
    }
  }
}
</script>
<style lang='scss' module>
.warp{

}
</style>
